<template>
    <el-dialog v-model="dialogVisible" :title="'条形码 - ' + requestParam.name" width="30%" style="min-width: 300px;"
        draggable>
        <div style="position: relative;width: 100%;height: 100%;
    min-height: 300px;
    ">

            <div id="code128Box" style="position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    ">

                <div id="info">
                    <span style="margin-right: 10px;">名称：
                        <template v-if="requestParam.name == null || requestParam.name == ''">
                            无
                        </template>
                        <template v-else>
                            {{ requestParam.name }}
                        </template></span>
                    <span style="margin-right: 10px;">
                        货号：
                        <template v-if="requestParam.numberStr == null || requestParam.numberStr == ''">
                            无
                        </template>
                        <template v-else>
                            {{ requestParam.numberStr }}
                        </template>
                    </span>
                    <span style="margin-right: 10px;">售价：
                        <template v-if="requestParam.retailPrice == null || requestParam.retailPrice == ''">
                            无
                        </template>
                        <template v-else>
                            {{ "￥" }}{{ requestParam.retailPrice }}
                        </template>
                    </span>

                </div>
                <img id="code128" style="
        width: 100%;
        height: 100%;
        " />

            </div>
        </div>
        <div>
            <el-button @click="print()">打印</el-button>
        </div>

    </el-dialog>
</template>


<script lang="ts" setup>
import { ref, defineEmits, defineExpose } from 'vue';
import { ElLoading, ElMessage } from 'element-plus'
import { de, fa } from 'element-plus/es/locale';
import JsBarcode from 'jsbarcode'

let dialogVisible = ref(false);
// emits
let emits = defineEmits(['submit']);

let requestParamStart = {
    // 条形码
    barCode: null,
    // 货码
    numberStr: null,

    // 名称
    name: null,
    // 展示图
    fileIdOfImgArrStr: '[]',
    // 单价
    price: null,
    // 库存
    stock: null,
    // 库存预警下限
    stockWarningLower: null,
    // 库存预警上限
    stockWarningUpper: null,
    // 零售价
    retailPrice: null,
    // 批发价
    wholesalePrice: null,
    // 采购价
    purchasePrice: null,
    // 起订量
    minOrder: null,
    // 优先级
    priority: null,
    // 商品分类id
    typeId: null,
    // 商品货号
    numberStr: null,
    // 条形码SVG
    barCodeSvg: null,
}


let requestParam = ref(JSON.parse(JSON.stringify(requestParamStart)));


let open = (param: any) => {
    if (param) {
        requestParam.value = JSON.parse(JSON.stringify(param));
    }

    setTimeout(() => {
        JsBarcode("#code128", requestParam.value.barCode, {
            format: "CODE128",
            lineColor: "#000",
            width: 2,
            height: 100,
            displayValue: true
        });
    }, 100);

    dialogVisible.value = true;
}


let print = () => {
    let printHtml = document.getElementById("code128Box")?.outerHTML;
    let printWindow = window.open("", "打印窗口", "height=100,width=100");
    printWindow?.document.write(printHtml);
    printWindow?.document.close();
    printWindow?.print();
    printWindow?.close();
}



// 暴露给父组件的方法
defineExpose({
    open
})


</script>


<style lang="scss" scoped>
.img-uploaded {
    cursor: pointer;
}

.img-uploaded:hover {
    opacity: 0.8;
}
</style>